/* ==========================================================
   AUFKLEBER STYLE.CSS
   RG DIGITALDRUCKFORUM GÖHRINGER

   GLOBALE ELEMENTE:
   - Header
   - Navigation
   - Footer
   - Cookie Banner
   - Back to Top
   - Grundschrift
   - globale Farben

   kommen aus:
   ../style.css


   INHALT:

   01  Variablen / Seite
   02  Breadcrumb
   03  Allgemeine Bereiche
   04  Hero
   05  Aufkleber im Einsatz
   06  Formenspiel
   07  Passend zum Einsatz
   08  Materialien
   09  So kommen sie an
   10  FAQ
   11  Anfrage
   12  Responsive
========================================================== */



/* ==========================================================
   01
   VARIABLEN / SEITE
========================================================== */

body#aufkleber {

  --ak-bg:
    #101315;

  --ak-bg-deep:
    #090b0c;

  --ak-bg-soft:
    #171b1e;

  --ak-card:
    rgba(
      255,
      255,
      255,
      0.025
    );

  --ak-line:
    rgba(
      255,
      255,
      255,
      0.11
    );

  --ak-line-strong:
    rgba(
      255,
      255,
      255,
      0.19
    );

  --ak-muted:
    rgba(
      255,
      255,
      255,
      0.66
    );

  --ak-muted-soft:
    rgba(
      255,
      255,
      255,
      0.43
    );

  --ak-red:
    #c5001a;

  --ak-red-light:
    #ff3046;

  --ak-white:
    #ffffff;

}


/* ----------------------------------------------------------
   SEITE
---------------------------------------------------------- */

.ak-page {

  position:
    relative;

  width:
    100%;

  padding-top:
    92px;

  overflow:
    hidden;

  background:
    var(--ak-bg);

}


/* ----------------------------------------------------------
   VOLLE BREITE
---------------------------------------------------------- */

.ak-shell {

  width:
    100%;

  margin:
    0;

  padding-right:
    var(
      --site-gutter,
      clamp(
        28px,
        5vw,
        92px
      )
    );

  padding-left:
    var(
      --site-gutter,
      clamp(
        28px,
        5vw,
        92px
      )
    );

}



/* ==========================================================
   02
   BREADCRUMB
========================================================== */

.product-breadcrumb {

  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  background:
    var(--ak-bg);

  font-size:
    0.76rem;

  font-weight:
    650;

}


.product-breadcrumb a {

  color:
    inherit;

  text-decoration:
    none;

  transition:
    color
    0.25s
    ease;

}


.product-breadcrumb a:hover,
.product-breadcrumb a:focus-visible {

  color:
    var(--ak-red-light);

}


.product-breadcrumb span {

  color:
    rgba(
      255,
      255,
      255,
      0.24
    );

}


.product-breadcrumb strong {

  color:
    #ffffff;

}



/* ==========================================================
   03
   ALLGEMEINE AUFKLEBER-BEREICHE
========================================================== */

.ak-section {

  position:
    relative;

  width:
    100%;

  padding:
    96px 0;

  background:
    var(--ak-bg);

}


.ak-section + .ak-section {

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.055
    );

}


/* ----------------------------------------------------------
   KICKER
---------------------------------------------------------- */

.ak-kicker {

  margin:
    0 0 14px;

  color:
    var(--ak-red-light);

  font-size:
    0.78rem;

  font-weight:
    900;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;

}


/* ----------------------------------------------------------
   STANDARD ÜBERSCHRIFT
---------------------------------------------------------- */

.ak-section-intro {

  max-width:
    900px;

  margin:
    0 0 58px;

}


.ak-section-intro h2,
.ak-material-heading h2,
.ak-faq-heading h2,
.ak-final-card h2 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

  letter-spacing:
    -0.045em;

}


.ak-section-intro > p:last-child {

  max-width:
    720px;

  margin:
    20px 0 0;

  color:
    var(--ak-muted);

  line-height:
    1.72;

}



/* ==========================================================
   04
   HERO
========================================================== */

.ak-hero {

  position:
    relative;

  width:
    100%;

  min-height:
    650px;

  overflow:
    hidden;

  isolation:
    isolate;

  background:
    #080808;

}



/* ----------------------------------------------------------
   HERO BILD
---------------------------------------------------------- */

.ak-hero-bg {

  position:
    absolute;

  top:
    -4%;

  right:
    0;

  z-index:
    0;

  width:
    63%;

  height:
    108%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

  opacity:
    0.95;

  filter:
    brightness(0.95)
    contrast(1.04);

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      #000000 0%,
      #000000 64%,
      rgba(0, 0, 0, 0.90) 74%,
      rgba(0, 0, 0, 0.42) 88%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      to bottom,
      #000000 0%,
      #000000 64%,
      rgba(0, 0, 0, 0.90) 74%,
      rgba(0, 0, 0, 0.42) 88%,
      transparent 100%
    );

}



/* ----------------------------------------------------------
   HERO VERLAUF
---------------------------------------------------------- */

.ak-hero-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8, 8, 8, 0.99) 27%,
      rgba(8, 8, 8, 0.91) 43%,
      rgba(8, 8, 8, 0.55) 58%,
      rgba(8, 8, 8, 0.12) 78%,
      transparent 100%
    ),

    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.04),
      transparent 55%,
      rgba(8, 8, 8, 0.82)
    );

}



/* ----------------------------------------------------------
   HERO INNER
---------------------------------------------------------- */

.ak-hero-inner {

  position:
    relative;

  z-index:
    2;

  min-height:
    650px;

  padding-top:
    52px;

  padding-bottom:
    30px;

  display:
    flex;

  flex-direction:
    column;

}



/* ==========================================================
   HERO SERVICES
========================================================== */

.ak-hero-services {

  width:
    fit-content;

  margin:
    0 0 38px;

  padding:
    0;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    34px;

  list-style:
    none;

  font-size:
    0.78rem;

  font-weight:
    800;

  letter-spacing:
    0.11em;

  text-transform:
    uppercase;

}


.ak-hero-service {

  position:
    relative;

  color:
    rgba(
      255,
      255,
      255,
      0.40
    );

  transition:

    color
    0.35s
    ease,

    transform
    0.35s
    ease;

}


.ak-hero-service::after {

  content:
    "";

  position:
    absolute;

  bottom:
    -8px;

  left:
    0;

  width:
    0;

  height:
    2px;

  border-radius:
    999px;

  background:
    var(--ak-red-light);

  transition:
    width
    0.35s
    ease;

}


.ak-hero-service.active {

  color:
    var(--ak-red-light);

  transform:
    translateY(-2px);

}


.ak-hero-service.active::after {

  width:
    100%;

}



/* ==========================================================
   HERO TEXT
========================================================== */

.ak-hero-content {

  width:
    min(
      650px,
      53%
    );

}


.ak-hero-content h1 {

  margin:
    0 0 28px;

  color:
    #ffffff;

  font-size:
    clamp(
      3rem,
      4.6vw,
      5.15rem
    );

  line-height:
    0.95;

  letter-spacing:
    -0.055em;

}


.ak-changing-word {

  display:
    block;

  min-height:
    1.05em;

  color:
    var(--ak-red-light);

  transition:

    opacity
    0.28s
    ease,

    transform
    0.28s
    ease;

}


.ak-changing-word.is-changing {

  opacity:
    0;

  transform:
    translateY(10px);

}


.ak-hero-text {

  max-width:
    610px;

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.77
    );

  font-size:
    1rem;

  line-height:
    1.75;

}



/* ==========================================================
   HERO FACTS
========================================================== */

.ak-hero-facts {

  width:
    min(
      920px,
      100%
    );

  margin-top:
    auto;

  padding-top:
    36px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

}


.ak-hero-fact {

  position:
    relative;

  min-height:
    105px;

  padding:
    18px 26px;

  display:
    grid;

  grid-template-columns:
    auto
    minmax(0, 1fr);

  gap:
    15px;

  align-items:
    start;

  transition:

    transform
    0.35s
    ease,

    background
    0.35s
    ease;

}


.ak-hero-fact:first-child {

  padding-left:
    0;

}


.ak-hero-fact:not(:last-child)::after {

  content:
    "";

  position:
    absolute;

  top:
    18px;

  right:
    0;

  bottom:
    18px;

  width:
    1px;

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

}


.ak-hero-fact-icon {

  min-width:
    34px;

  color:
    var(--ak-red-light);

}


.ak-hero-fact-icon svg {

  width:
    28px;

  height:
    28px;

  display:
    block;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;

}


.ak-hero-fact strong {

  display:
    block;

  margin-bottom:
    5px;

  color:
    #ffffff;

  font-size:
    0.92rem;

}


.ak-hero-fact p {

  margin:
    0;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size:
    0.75rem;

  line-height:
    1.5;

}


.ak-hero-fact:hover {

  transform:
    translateY(-4px);

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.08),
      transparent
    );

}



/* ==========================================================
   05
   AUFKLEBER IM EINSATZ
========================================================== */

.ak-world-section {

  background:

    radial-gradient(
      circle at 90% 5%,
      rgba(197, 0, 26, 0.055),
      transparent 27%
    ),

    var(--ak-bg);

}


.ak-world-list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    92px;

}


.ak-world-item {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  gap:
    clamp(
      46px,
      6vw,
      92px
    );

  align-items:
    center;

}


.ak-world-item--reverse {

  grid-template-columns:
    minmax(320px, 0.85fr)
    minmax(0, 1.15fr);

}


.ak-world-item--reverse
.ak-world-image {

  grid-column:
    2;

  grid-row:
    1;

}


.ak-world-item--reverse
.ak-world-copy {

  grid-column:
    1;

  grid-row:
    1;

}



/* ----------------------------------------------------------
   BILDER
---------------------------------------------------------- */

.ak-world-image {

  position:
    relative;

  min-width:
    0;

  height:
    clamp(
      350px,
      36vw,
      510px
    );

  margin:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    26px;

  background:
    #090b0c;

  box-shadow:
    0 30px 75px
    rgba(
      0,
      0,
      0,
      0.34
    );

}


.ak-world-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform
    0.75s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    );

}


.ak-world-item:hover
.ak-world-image img {

  transform:
    scale(1.035);

}



/* ----------------------------------------------------------
   TEXT
---------------------------------------------------------- */

.ak-world-copy {

  position:
    relative;

  min-width:
    0;

  padding-left:
    5px;

}


.ak-world-number {

  display:
    block;

  margin-bottom:
    18px;

  color:
    transparent;

  font-size:
    clamp(
      3.8rem,
      6vw,
      6.8rem
    );

  font-weight:
    900;

  line-height:
    0.8;

  letter-spacing:
    -0.08em;

  -webkit-text-stroke:
    1px
    rgba(
      255,
      255,
      255,
      0.20
    );

}
.ak-world-copy {
  transition:
    background .35s ease,
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;

  padding:
    28px 30px;

  border:
    1px solid transparent;

  border-radius:
    22px;
}

.ak-world-item:hover
.ak-world-copy {

  transform:
    translateY(-4px);

  background:
    linear-gradient(
      135deg,
      rgba(197, 0, 26, .13),
      rgba(197, 0, 26, .045) 58%,
      transparent 100%
    );

  border-color:
    rgba(255, 48, 70, .16);

  box-shadow:
    0 22px 50px
    rgba(0, 0, 0, .18);
}


/* Nummer wird rot */

.ak-world-number {

  transition:
    -webkit-text-stroke-color .35s ease,
    transform .35s ease;
}

.ak-world-item:hover
.ak-world-number {

  -webkit-text-stroke-color:
    var(--ak-red-light);

  transform:
    translateX(4px);
}


/* Überschrift leicht reagieren lassen */

.ak-world-copy h3 {

  transition:
    color .35s ease,
    transform .35s ease;
}

.ak-world-item:hover
.ak-world-copy h3 {

  color:
    #ffffff;

  transform:
    translateX(4px);
}


/* Fließtext etwas heller */

.ak-world-copy > p:last-child {

  transition:
    color .35s ease,
    transform .35s ease;
}

.ak-world-item:hover
.ak-world-copy > p:last-child {

  color:
    rgba(255,255,255,.82);

  transform:
    translateX(4px);
}


.ak-world-label {

  display:
    block;

  margin:
    0 0 10px;

  color:
    var(--ak-red-light);

  font-size:
    0.70rem;

  font-weight:
    900;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;

}


.ak-world-copy h3 {

  max-width:
    620px;

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.8rem,
      2.8vw,
      3.25rem
    );

  line-height:
    1.05;

  letter-spacing:
    -0.04em;

}


.ak-world-copy > p:last-child {

  max-width:
    570px;

  margin:
    19px 0 0;

  color:
    var(--ak-muted);

  line-height:
    1.72;

}



/* ==========================================================
   06
   FORMENSPIEL
========================================================== */

.ak-shape-section {

  overflow:
    hidden;

  background:
    var(--ak-bg-deep);

}


.ak-shape-layout {

  display:
    grid;

  grid-template-columns:
    minmax(320px, 0.78fr)
    minmax(440px, 1.22fr);

  gap:
    clamp(
      55px,
      7vw,
      110px
    );

  align-items:
    center;

}



/* ----------------------------------------------------------
   TEXT
---------------------------------------------------------- */

.ak-shape-copy h2 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.35rem
    );

  line-height:
    1;

  letter-spacing:
    -0.045em;

}


.ak-shape-copy > p:not(.ak-kicker) {

  max-width:
    600px;

  margin:
    21px 0 0;

  color:
    var(--ak-muted);

  line-height:
    1.72;

}



/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.ak-shape-buttons {

  margin-top:
    34px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    10px;

}


.ak-shape-buttons button {

  min-height:
    45px;

  padding:
    11px 17px;

  color:
    rgba(
      255,
      255,
      255,
      0.67
    );

  background:
    transparent;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    999px;

  cursor:
    pointer;

  font-size:
    0.79rem;

  font-weight:
    800;

  transition:

    color
    0.28s
    ease,

    background
    0.28s
    ease,

    border-color
    0.28s
    ease,

    transform
    0.28s
    ease;

}


.ak-shape-buttons button:hover,
.ak-shape-buttons button:focus-visible {

  color:
    #ffffff;

  border-color:
    var(--ak-line-strong);

  transform:
    translateY(-2px);

  outline:
    none;

}


.ak-shape-buttons button.is-active {

  color:
    #ffffff;

  background:
    var(--ak-red);

  border-color:
    var(--ak-red);

}



/* ----------------------------------------------------------
   FORM INFO
---------------------------------------------------------- */

.ak-shape-meta {

  margin-top:
    30px;

  padding-top:
    22px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  border-top:
    1px solid
    var(--ak-line);

}


.ak-shape-meta strong {

  color:
    #ffffff;

  font-size:
    0.98rem;

}


.ak-shape-meta span {

  color:
    var(--ak-muted);

  font-size:
    0.82rem;

  line-height:
    1.55;

}



/* ==========================================================
   FORMEN STAGE
========================================================== */

.ak-shape-stage {

  position:
    relative;

  min-height:
    545px;

  padding:
    55px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    26px;

  background:

    linear-gradient(
      rgba(255, 255, 255, 0.021) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.021) 1px,
      transparent 1px
    ),

    #0d1012;

  background-size:
    40px 40px;

}


.ak-shape-stage::before {

  content:
    "";

  position:
    absolute;

  width:
    390px;

  height:
    390px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(197, 0, 26, 0.13),
      transparent 68%
    );

}


.ak-shape-stage-label {

  position:
    absolute;

  z-index:
    8;

  top:
    19px;

  left:
    20px;

  color:
    var(--ak-muted-soft);

  font-size:
    0.61rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}



/* ==========================================================
   AUFKLEBER VORSCHAU
========================================================== */

.ak-sticker-preview {

  position:
    relative;

  z-index:
    2;

  width:
    285px;

  height:
    285px;

  padding:
    42px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    7px solid
    #ffffff;

  background:

    radial-gradient(
      circle at 30% 22%,
      #303437,
      #090b0c 67%
    );

  box-shadow:

    0 30px 58px
    rgba(
      0,
      0,
      0,
      0.52
    ),

    0 0 0 1px
    rgba(
      255,
      255,
      255,
      0.10
    );

  transition:

    width
    0.45s
    ease,

    height
    0.45s
    ease,

    border-radius
    0.45s
    ease,

    transform
    0.45s
    ease;

}


.ak-sticker-preview img {

  position:
    relative;

  z-index:
    3;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

}


.ak-sticker-preview--round {

  border-radius:
    50%;

}


.ak-sticker-preview--square {

  border-radius:
    18px;

}


.ak-sticker-preview--oval {

  width:
    365px;

  height:
    225px;

  border-radius:
    50%;

}



/* ==========================================================
   FREIFORM BLITZ
   OBERE SPITZE KOMPLETT SICHTBAR
========================================================== */

.ak-sticker-preview--free {

  width:
    280px;

  height:
    330px;

  padding:
    0;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  box-shadow:
    none;

}


.ak-sticker-preview--free::before {

  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  z-index:
    1;

  width:
    200px;

  height:
    300px;

  background:

    linear-gradient(
      145deg,
      #ff3542,
      #c5001a 50%,
      #950013
    );

  clip-path:
    polygon(
      62% 3%,
      14% 55%,
      43% 55%,
      28% 97%,
      88% 37%,
      59% 37%
    );

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(5deg);

  filter:

    drop-shadow(
      0 28px 26px
      rgba(
        0,
        0,
        0,
        0.48
      )
    )

    drop-shadow(
      0 0 16px
      rgba(
        197,
        0,
        26,
        0.26
      )
    );

}


.ak-sticker-preview--free img {

  position:
    absolute;

  top:
    49%;

  left:
    50%;

  z-index:
    4;

  width:
    65px;

  height:
    55px;

  object-fit:
    contain;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(5deg);

}


.ak-sticker-preview--free
.ak-sticker-shine {

  display:
    none;

}



/* ----------------------------------------------------------
   GLANZ
---------------------------------------------------------- */

.ak-sticker-shine {

  position:
    absolute;

  z-index:
    5;

  inset:
    -70%;

  pointer-events:
    none;

  background:

    linear-gradient(
      110deg,
      transparent 40%,
      rgba(
        255,
        255,
        255,
        0.32
      ) 49%,
      transparent 59%
    );

  transform:
    translateX(-48%)
    rotate(8deg);

  transition:
    transform
    0.65s
    ease;

}


.ak-sticker-preview:hover
.ak-sticker-shine {

  transform:
    translateX(45%)
    rotate(8deg);

}


.ak-sticker-preview:hover {

  transform:
    translateY(-6px);

}



/* ==========================================================
   07
   PASSEND ZUM EINSATZ
========================================================== */

.ak-surface-section {

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 10% 30%,
      rgba(197, 0, 26, 0.055),
      transparent 28%
    ),

    var(--ak-bg);

}


.ak-surface-intro {

  margin-bottom:
    60px;

}



/* ==========================================================
   SHOWCASE
========================================================== */

.ak-surface-showcase {

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.42fr)
    minmax(330px, 0.58fr);

  gap:
    clamp(
      30px,
      4vw,
      62px
    );

  align-items:
    stretch;

}



/* ==========================================================
   GROSSE BILDBÜHNE
========================================================== */

.ak-surface-stage {

  position:
    relative;

  min-width:
    0;

  height:
    clamp(
      520px,
      46vw,
      650px
    );

  overflow:
    hidden;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    28px;

  background:
    #080a0b;

  box-shadow:
    0 35px 90px
    rgba(
      0,
      0,
      0,
      0.35
    );

}



/* ----------------------------------------------------------
   EINZELNE SZENE
---------------------------------------------------------- */

.ak-surface-scene {

  position:
    absolute;

  inset:
    0;

  overflow:
    hidden;

  display:
    block;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    scale(1.025);

  transition:

    opacity
    0.55s
    ease,

    visibility
    0.55s
    ease,

    transform
    0.85s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    );

}


.ak-surface-scene[hidden] {

  display:
    block;

}


.ak-surface-scene.is-active {

  opacity:
    1;

  visibility:
    visible;

  transform:
    scale(1);

}


.ak-surface-scene > img {

  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  max-width:
    none;

  object-fit:
    cover;

  object-position:
    center;

}



/* ----------------------------------------------------------
   OVERLAY
---------------------------------------------------------- */

.ak-surface-scene-overlay {

  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  pointer-events:
    none;

  background:
    linear-gradient(
      0deg,
      rgba(6,8,9,.28) 0%,
      transparent 38%
    );

}



/* ----------------------------------------------------------
   SZENEN TEXT
---------------------------------------------------------- */
.ak-surface-scene-copy {

  position:
    absolute;

  z-index:
    3;

  left:
    34px;

  bottom:
    30px;

  width:
    auto;

}

.ak-surface-scene-copy > span {

  display:
    block;

  margin-bottom:
    12px;

  color:
    var(--ak-red-light);

  font-size:
    0.69rem;

  font-weight:
    900;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;

}


.ak-surface-scene-copy h3,
.ak-surface-scene-copy > p {

  display:
    none;

}


/* ----------------------------------------------------------
   TAGS
---------------------------------------------------------- */

.ak-surface-tags {

  margin-top:
    24px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    8px;

}


.ak-surface-tags small {

  padding:
    7px 11px;

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  background:
    rgba(
      7,
      8,
      9,
      0.64
    );

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius:
    999px;

  font-size:
    0.64rem;

  font-weight:
    750;

  backdrop-filter:
    blur(10px);

}



/* ==========================================================
   RECHTE AUSWAHL
========================================================== */

.ak-surface-rail {

  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border-top:
    1px solid
    var(--ak-line);

}



/* ----------------------------------------------------------
   EINZELNE AUSWAHL
---------------------------------------------------------- */

.ak-surface-choice {

  position:
    relative;

  width:
    100%;

  min-height:
    122px;

  padding:
    20px 8px;

  display:
    grid;

  grid-template-columns:
    54px
    minmax(0, 1fr);

  gap:
    15px;

  align-items:
    center;

  color:
    inherit;

  background:
    transparent;

  border:
    0;

  border-bottom:
    1px solid
    var(--ak-line);

  text-align:
    left;

  cursor:
    pointer;

  transition:

    padding-left
    0.32s
    ease,

    background
    0.32s
    ease;

}


.ak-surface-choice::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    2px;

  background:
    var(--ak-red-light);

  transform:
    scaleY(0);

  transition:
    transform
    0.32s
    ease;

}


.ak-surface-choice:hover,
.ak-surface-choice:focus-visible,
.ak-surface-choice.is-active {

  padding-left:
    19px;

  background:
    linear-gradient(
      90deg,
      rgba(197, 0, 26, 0.09),
      transparent 74%
    );

  outline:
    none;

}


.ak-surface-choice.is-active::before {

  transform:
    scaleY(1);

}



/* ----------------------------------------------------------
   NUMMER
---------------------------------------------------------- */

.ak-surface-choice-number {

  color:
    transparent;

  font-size:
    2.2rem;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -0.06em;

  -webkit-text-stroke:
    1px
    rgba(
      255,
      255,
      255,
      0.30
    );

  transition:
    -webkit-text-stroke-color
    0.32s
    ease;

}


.ak-surface-choice.is-active
.ak-surface-choice-number,
.ak-surface-choice:hover
.ak-surface-choice-number {

  -webkit-text-stroke-color:
    var(--ak-red-light);

}



/* ----------------------------------------------------------
   TEXT
---------------------------------------------------------- */

.ak-surface-choice-copy {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

}


.ak-surface-choice-copy strong {

  color:
    #ffffff;

  font-size:
    1rem;

  line-height:
    1.2;

}


.ak-surface-choice-copy small {

  color:
    var(--ak-muted-soft);

  font-size:
    0.68rem;

  line-height:
    1.4;

}


.ak-surface-choice-arrow {
  display:
    none;
}


/* ==========================================================
   08
   MATERIALIEN
========================================================== */

.ak-material-section {

  background:
    var(--ak-bg-deep);

}



/* ----------------------------------------------------------
   HEADING
---------------------------------------------------------- */

.ak-material-heading {

  margin-bottom:
    55px;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 0.62fr);

  gap:
    clamp(
      45px,
      7vw,
      110px
    );

  align-items:
    end;

}


.ak-material-heading > p {

  max-width:
    580px;

  margin:
    0;

  color:
    var(--ak-muted);

  line-height:
    1.72;

}



/* ==========================================================
   MATERIAL GRID
========================================================== */

.ak-material-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    22px;

}


.ak-material-card {

  min-width:
    0;

  overflow:
    hidden;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    26px;

  background:
    var(--ak-card);

  box-shadow:
    0 22px 55px
    rgba(
      0,
      0,
      0,
      0.20
    );

  transition:

    transform
    0.35s
    ease,

    border-color
    0.35s
    ease,

    box-shadow
    0.35s
    ease;

}


.ak-material-card:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(
      255,
      48,
      70,
      0.28
    );

  box-shadow:
    0 28px 65px
    rgba(
      0,
      0,
      0,
      0.28
    );

}



/* ----------------------------------------------------------
   MATERIAL BILD
---------------------------------------------------------- */

.ak-material-image {

  width:
    100%;

  height:
    340px;

  margin:
    0;

  overflow:
    hidden;

  background:
    #090b0c;

}


.ak-material-image img {

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;

  transition:
    transform
    0.7s
    ease;

}


.ak-material-card:hover
.ak-material-image img {

  transform:
    scale(1.035);

}



/* ----------------------------------------------------------
   MATERIAL TEXT
---------------------------------------------------------- */

.ak-material-content {

  padding:
    30px 28px 32px;

}


.ak-material-label {

  display:
    block;

  margin:
    0 0 10px;

  color:
    var(--ak-red-light);

  font-size:
    0.68rem;

  font-weight:
    900;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

}


.ak-material-content h3 {

  margin:
    0;

  color:
    #ffffff;

  font-size:
    clamp(
      1.45rem,
      2vw,
      1.9rem
    );

  line-height:
    1.08;

}


.ak-material-content
> p:not(.ak-material-label) {

  margin:
    17px 0 0;

  color:
    var(--ak-muted);

  font-size:
    0.86rem;

  line-height:
    1.65;

}



/* ----------------------------------------------------------
   MATERIAL TAGS
---------------------------------------------------------- */

.ak-material-tags {

  margin-top:
    24px;

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    7px;

}


.ak-material-tags span {

  padding:
    7px 10px;

  color:
    rgba(
      255,
      255,
      255,
      0.64
    );

  background:
    rgba(
      255,
      255,
      255,
      0.025
    );

  border:
    1px solid
    var(--ak-line);

  border-radius:
    999px;

  font-size:
    0.62rem;

  font-weight:
    740;

}



/* ==========================================================
   09
   SO KOMMEN SIE AN
========================================================== */

.ak-output-section {

  overflow:
    hidden;

  background:

    radial-gradient(
      circle at 83% 45%,
      rgba(197, 0, 26, 0.07),
      transparent 30%
    ),

    var(--ak-bg);

}


.ak-output-intro {

  margin-bottom:
    60px;

}



/* ==========================================================
   EXPERIENCE
========================================================== */

.ak-output-experience {

  display:
    grid;

  grid-template-columns:
    minmax(330px, 0.58fr)
    minmax(480px, 1.42fr);

  gap:
    clamp(
      42px,
      6vw,
      95px
    );

  align-items:
    center;

}



/* ==========================================================
   SCHRITTE
========================================================== */

.ak-output-steps {

  border-top:
    1px solid
    var(--ak-line);

}


.ak-output-step {

  position:
    relative;

  width:
    100%;

  min-height:
    142px;

  padding:
    24px 5px;

  display:
    grid;

  grid-template-columns:
    68px
    minmax(0, 1fr);

  gap:
    20px;

  align-items:
    start;

  color:
    inherit;

  background:
    transparent;

  border:
    0;

  border-bottom:
    1px solid
    var(--ak-line);

  text-align:
    left;

  cursor:
    pointer;

  transition:

    padding-left
    0.32s
    ease,

    background
    0.32s
    ease;

}


.ak-output-step::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  bottom:
    0;

  left:
    0;

  width:
    2px;

  background:
    var(--ak-red-light);

  transform:
    scaleY(0);

  transition:
    transform
    0.32s
    ease;

}


.ak-output-step:hover,
.ak-output-step:focus-visible,
.ak-output-step.is-active {

  padding-left:
    17px;

  background:
    linear-gradient(
      90deg,
      rgba(197, 0, 26, 0.08),
      transparent 75%
    );

  outline:
    none;

}


.ak-output-step.is-active::before {

  transform:
    scaleY(1);

}



/* ----------------------------------------------------------
   GROSSE NUMMER
---------------------------------------------------------- */

.ak-output-step > span {

  color:
    transparent;

  font-size:
    2.9rem;

  font-weight:
    900;

  line-height:
    0.9;

  letter-spacing:
    -0.07em;

  -webkit-text-stroke:
    1px
    rgba(
      255,
      255,
      255,
      0.28
    );

  transition:
    -webkit-text-stroke-color
    0.32s
    ease;

}


.ak-output-step.is-active
> span,
.ak-output-step:hover
> span {

  -webkit-text-stroke-color:
    var(--ak-red-light);

}



/* ----------------------------------------------------------
   SCHRITT TEXT
---------------------------------------------------------- */

.ak-output-step div {

  display:
    block;

}


.ak-output-step small {

  display:
    block;

  margin-bottom:
    5px;

  color:
    var(--ak-red-light);

  font-size:
    0.61rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}


.ak-output-step strong {

  display:
    block;

  color:
    #ffffff;

  font-size:
    1.15rem;

  line-height:
    1.25;

}


.ak-output-step p {

  max-width:
    390px;

  margin:
    8px 0 0;

  color:
    var(--ak-muted);

  font-size:
    0.79rem;

  line-height:
    1.55;

}



/* ==========================================================
   OUTPUT STAGE
========================================================== */

.ak-output-stage {

  position:
    relative;

  min-height:
    590px;

  padding:
    62px 48px 85px;

  overflow:
    hidden;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--ak-line);

  border-radius:
    28px;

  background:

    linear-gradient(
      rgba(255, 255, 255, 0.020) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.020) 1px,
      transparent 1px
    ),

    #0d1012;

  background-size:
    42px 42px;

}


.ak-output-stage::before {

  content:
    "";

  position:
    absolute;

  width:
    420px;

  height:
    420px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(197, 0, 26, 0.11),
      transparent 69%
    );

}


.ak-output-stage-label {

  position:
    absolute;

  z-index:
    10;

  top:
    20px;

  left:
    21px;

  color:
    var(--ak-muted-soft);

  font-size:
    0.61rem;

  font-weight:
    900;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}



/* ==========================================================
   STICKER SHEET
========================================================== */

.ak-sticker-sheet {

  position:
    relative;

  z-index:
    2;

  width:
    min(
      500px,
      92%
    );

  aspect-ratio:
    1.25 / 1;

  padding:
    48px 52px;

  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  grid-template-rows:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    35px 50px;

  align-items:
    center;

  justify-items:
    center;

  overflow:
    visible;

  border-radius:
    3px;

  background:

    linear-gradient(
      145deg,
      #f5f5f1,
      #deded8
    );

  box-shadow:

    0 34px 65px
    rgba(
      0,
      0,
      0,
      0.46
    ),

    0 0 0 1px
    rgba(
      255,
      255,
      255,
      0.08
    );

  transform:
    rotate(-1.2deg);

}



/* ----------------------------------------------------------
   BOGEN STRUKTUR
---------------------------------------------------------- */

.ak-sticker-sheet::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  opacity:
    0.20;

  background-image:

    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 4px,
      rgba(0, 0, 0, 0.022) 5px
    );

}



/* ----------------------------------------------------------
   LICHTSCHEIN
---------------------------------------------------------- */

.ak-sheet-light {

  position:
    absolute;

  z-index:
    7;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

}


.ak-sheet-light::after {

  content:
    "";

  position:
    absolute;

  inset:
    -70%;

  background:

    linear-gradient(
      110deg,
      transparent 40%,
      rgba(
        255,
        255,
        255,
        0.50
      ) 49%,
      transparent 59%
    );

  transform:
    translateX(-50%);

  animation:
    ak-sheet-shine
    5.5s
    ease-in-out
    infinite;

}


@keyframes ak-sheet-shine {

  0%,
  25% {

    transform:
      translateX(-50%);

  }

  75%,
  100% {

    transform:
      translateX(50%);

  }

}



/* ==========================================================
   STICKER
========================================================== */

.ak-sheet-sticker {

  position:
    relative;

  z-index:
    3;

  width:
    125px;

  height:
    125px;

  padding:
    25px;

  display:
    grid;

  place-items:
    center;

  overflow:
    visible;

  background:

    radial-gradient(
      circle at 32% 23%,
      #303437,
      #080a0b 70%
    );

  border:
    5px solid
    #ffffff;

  cursor:
    pointer;

  box-shadow:
    0 15px 22px
    rgba(
      0,
      0,
      0,
      0.22
    );

  transition:

    transform
    0.55s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    ),

    opacity
    0.45s
    ease,

    box-shadow
    0.45s
    ease;

}


.ak-sheet-sticker img {

  position:
    relative;

  z-index:
    3;

  width:
    100%;

  height:
    100%;

  pointer-events:
    none;

  object-fit:
    contain;

}



/* ----------------------------------------------------------
   SCHNITTKONTUR
   WIRD DURCH JS-KLASSE SICHTBAR GEMACHT
---------------------------------------------------------- */

.ak-sheet-sticker::after {

  content:
    "";

  position:
    absolute;

  z-index:
    -1;

  inset:
    -12px;

  pointer-events:
    none;

  border:
    1px dashed
    rgba(
      197,
      0,
      26,
      0
    );

  border-radius:
    inherit;

  opacity:
    0;

  transition:

    border-color
    0.35s
    ease,

    opacity
    0.35s
    ease;

}


.ak-output-experience.is-cut
.ak-sheet-sticker::after {

  border-color:
    rgba(
      197,
      0,
      26,
      0.70
    );

  opacity:
    1;

}



/* ----------------------------------------------------------
   FORMEN
---------------------------------------------------------- */

.ak-sheet-sticker--round {

  border-radius:
    50%;

}


.ak-sheet-sticker--square {

  border-radius:
    16px;

}


.ak-sheet-sticker--oval {

  width:
    155px;

  height:
    105px;

  border-radius:
    50%;

}



/* ==========================================================
   FREIFORM AUF DEM BOGEN
========================================================== */

.ak-sheet-sticker--free {

  position:
    relative;

  width:
    112px;

  height:
    150px;

  padding:
    0;

  overflow:
    visible;

  border:
    0;

  border-radius:
    0;

  background:

    linear-gradient(
      145deg,
      #ff3542,
      #c5001a 50%,
      #950013
    );

  clip-path:
    polygon(
      62% 3%,
      14% 55%,
      43% 55%,
      28% 97%,
      88% 37%,
      59% 37%
    );

  transform:
    rotate(5deg);

  filter:
    drop-shadow(
      0 15px 14px
      rgba(
        0,
        0,
        0,
        0.28
      )
    );

}


.ak-sheet-sticker--free img {

  position:
    absolute;

  top:
    48%;

  left:
    50%;

  width:
    52px;

  height:
    42px;

  transform:
    translate(
      -50%,
      -50%
    )
    rotate(-5deg);

}



/* ----------------------------------------------------------
   FREIFORM SCHNITTLINIE
---------------------------------------------------------- */

.ak-sheet-sticker--free::after {

  inset:
    0;

  border:
    0;

  border-radius:
    0;

  background:
    transparent;

  clip-path:
    polygon(
      62% 3%,
      14% 55%,
      43% 55%,
      28% 97%,
      88% 37%,
      59% 37%
    );

  box-shadow:
    0 0 0 1px
    rgba(
      197,
      0,
      26,
      0
    );

}


.ak-output-experience.is-cut
.ak-sheet-sticker--free::after {

  box-shadow:
    0 0 0 1px
    rgba(
      255,
      255,
      255,
      0.75
    );

}



/* ==========================================================
   ABZIEH ANIMATION
========================================================== */

.ak-sheet-sticker.is-peeling {

  z-index:
    9;

  transform:
    translateY(-14px)
    rotate(-5deg)
    scale(1.025);

  box-shadow:
    16px 26px 32px
    rgba(
      0,
      0,
      0,
      0.36
    );

}


.ak-sheet-sticker--free.is-peeling {

  transform:
    translateY(-14px)
    rotate(1deg)
    scale(1.045);

}


.ak-sheet-sticker.is-removed {

  opacity:
    0;

  transform:
    translate(
      80px,
      -80px
    )
    rotate(18deg)
    scale(0.78);

}



/* ==========================================================
   STATUS UNTEN
========================================================== */

.ak-output-status {

  position:
    absolute;

  z-index:
    10;

  right:
    24px;

  bottom:
    21px;

  left:
    24px;

  min-height:
    42px;

  padding-top:
    16px;

  display:
    grid;

  grid-template-columns:
    auto
    auto
    minmax(0, 1fr);

  gap:
    10px;

  align-items:
    center;

  border-top:
    1px solid
    var(--ak-line);

}


.ak-output-status-dot {

  width:
    7px;

  height:
    7px;

  border-radius:
    50%;

  background:
    var(--ak-red-light);

  box-shadow:
    0 0 11px
    rgba(
      255,
      48,
      70,
      0.48
    );

}


.ak-output-status strong {

  color:
    #ffffff;

  font-size:
    0.73rem;

}


.ak-output-status > span:last-child {

  color:
    var(--ak-muted-soft);

  font-size:
    0.68rem;

}



/* ==========================================================
   10
   FAQ
   WIE WEBDESIGN
========================================================== */

.ak-faq-section {

  background:
    var(--ak-bg-deep);

}


.ak-faq-heading {

  max-width:
    900px;

  margin:
    0 0 52px;

}



/* ==========================================================
   FAQ LISTE
========================================================== */

.ak-faq-list {

  border-top:
    1px solid
    var(--ak-line);

}


.ak-faq-item {

  border-bottom:
    1px solid
    var(--ak-line);

}


.ak-faq-item summary {

  padding:
    26px 0;

  display:
    grid;

  grid-template-columns:
    1fr
    34px;

  gap:
    20px;

  align-items:
    center;

  color:
    #ffffff;

  list-style:
    none;

  cursor:
    pointer;

  font-size:
    1.18rem;

  font-weight:
    750;

}


.ak-faq-item
summary::-webkit-details-marker {

  display:
    none;

}


.ak-faq-item summary b {

  color:
    var(--ak-red-light);

  font-size:
    1.50rem;

  font-weight:
    300;

  transition:
    transform
    0.30s
    ease;

}


.ak-faq-item[open]
summary b {

  transform:
    rotate(45deg);

}


.ak-faq-item > p {

  max-width:
    820px;

  margin:
    0;

  padding:
    0 50px 28px 0;

  color:
    var(--ak-muted);

  line-height:
    1.7;

}



/* ==========================================================
   11
   ANFRAGE
   WIE WEBDESIGN
========================================================== */

.ak-final-section {

  padding-top:
    72px;

  padding-bottom:
    105px;

  background:
    var(--ak-bg);

}


.ak-final-card {

  position:
    relative;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius:
    28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197, 0, 26, 0.13),
      transparent 38%
    ),

    rgba(
      255,
      255,
      255,
      0.025
    );

  box-shadow:
    0 30px 70px
    rgba(
      0,
      0,
      0,
      0.22
    );

}


/* ----------------------------------------------------------
   KEINE ROTE LINIE OBEN
---------------------------------------------------------- */

.ak-final-card::before,
.ak-final-card::after {

  display:
    none !important;

  content:
    none !important;

}


.ak-final-copy {

  max-width:
    850px;

}


.ak-final-copy
> p:not(.ak-kicker) {

  max-width:
    720px;

  margin:
    22px 0 0;

  color:
    var(--ak-muted);

  line-height:
    1.7;

}



/* ----------------------------------------------------------
   BUTTON
---------------------------------------------------------- */

.ak-final-button {

  min-height:
    56px;

  margin-top:
    30px;

  padding:
    16px 29px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #ffffff;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius:
    999px;

  box-shadow:
    0 15px 35px
    rgba(
      241,
      13,
      27,
      0.24
    );

  font-size:
    0.94rem;

  font-weight:
    850;

  text-decoration:
    none;

  transition:

    transform
    0.25s
    ease,

    background
    0.25s
    ease,

    box-shadow
    0.25s
    ease;

}


.ak-final-button:hover,
.ak-final-button:focus-visible {

  color:
    #ffffff;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(
      241,
      13,
      27,
      0.32
    );

  outline:
    none;

}



/* ==========================================================
   12
   RESPONSIVE

   ALLE MEDIA QUERIES AB HIER UNTEN
========================================================== */



/* ==========================================================
   BIS 1180 PX
========================================================== */

@media (max-width: 1180px) {


  .ak-page {

    padding-top:
      86px;

  }


  /* --------------------------------------------------------
     PASSEND ZUM EINSATZ
  -------------------------------------------------------- */

  .ak-surface-showcase {

    grid-template-columns:
      minmax(0, 1.25fr)
      minmax(300px, 0.75fr);

    gap:
      32px;

  }


  .ak-surface-choice {

    min-height:
      115px;

  }


  /* --------------------------------------------------------
     MATERIALIEN
  -------------------------------------------------------- */

  .ak-material-grid {

    gap:
      18px;

  }


  .ak-material-image {

    height:
      300px;

  }


  /* --------------------------------------------------------
     OUTPUT
  -------------------------------------------------------- */

  .ak-output-experience {

    grid-template-columns:
      minmax(300px, 0.65fr)
      minmax(430px, 1.35fr);

    gap:
      45px;

  }

}



/* ==========================================================
   BIS 980 PX
========================================================== */

@media (max-width: 980px) {


  .ak-page {

    padding-top:
      82px;

  }


  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  .ak-hero-bg {

    width:
      72%;

  }


  .ak-hero-content {

    width:
      min(
        610px,
        62%
      );

  }


  /* --------------------------------------------------------
     WORLD
  -------------------------------------------------------- */

  .ak-world-item,
  .ak-world-item--reverse {

    grid-template-columns:
      1fr;

    gap:
      34px;

  }


  .ak-world-item--reverse
  .ak-world-image,
  .ak-world-item--reverse
  .ak-world-copy {

    grid-column:
      auto;

    grid-row:
      auto;

  }


  .ak-world-item--reverse
  .ak-world-image {

    order:
      0;

  }


  .ak-world-item--reverse
  .ak-world-copy {

    order:
      1;

  }


  .ak-world-copy {

    max-width:
      680px;

  }


  /* --------------------------------------------------------
     FORMENSPIEL
  -------------------------------------------------------- */

  .ak-shape-layout {

    grid-template-columns:
      1fr;

    gap:
      52px;

  }


  .ak-shape-copy {

    max-width:
      780px;

  }


  /* --------------------------------------------------------
     PASSEND ZUM EINSATZ
  -------------------------------------------------------- */

  .ak-surface-showcase {

    grid-template-columns:
      1fr;

    gap:
      35px;

  }


  .ak-surface-stage {

    height:
      570px;

  }


  .ak-surface-rail {

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    border-top:
      1px solid
      var(--ak-line);

  }


  .ak-surface-choice:nth-child(odd) {

    border-right:
      1px solid
      var(--ak-line);

  }


  /* --------------------------------------------------------
     MATERIAL
  -------------------------------------------------------- */

  .ak-material-heading {

    grid-template-columns:
      1fr;

    gap:
      24px;

  }


  .ak-material-heading > p {

    max-width:
      700px;

  }


  .ak-material-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .ak-material-card:last-child {

    grid-column:
      1 / -1;

  }


  .ak-material-card:last-child
  .ak-material-image {

    height:
      380px;

  }


  /* --------------------------------------------------------
     OUTPUT
  -------------------------------------------------------- */

  .ak-output-experience {

    grid-template-columns:
      1fr;

    gap:
      45px;

  }


  .ak-output-steps {

    display:
      grid;

    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );

  }


  .ak-output-step {

    min-height:
      170px;

    grid-template-columns:
      1fr;

    gap:
      12px;

    border-right:
      1px solid
      var(--ak-line);

  }


  .ak-output-step:last-child {

    border-right:
      0;

  }


  .ak-output-step::before {

    top:
      auto;

    right:
      0;

    bottom:
      0;

    width:
      auto;

    height:
      2px;

    transform:
      scaleX(0);

  }


  .ak-output-step.is-active::before {

    transform:
      scaleX(1);

  }


  .ak-output-stage {

    min-height:
      590px;

  }

}



/* ==========================================================
   BIS 760 PX
========================================================== */

@media (max-width: 760px) {


  .ak-page {

    padding-top:
      76px;

  }


  .ak-section {

    padding:
      78px 0;

  }


  /* --------------------------------------------------------
     BREADCRUMB
  -------------------------------------------------------- */

  .product-breadcrumb {

    min-height:
      50px;

    overflow-x:
      auto;

    white-space:
      nowrap;

  }


  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  .ak-hero {

    min-height:
      760px;

  }


  .ak-hero-bg {

    top:
      0;

    width:
      100%;

    height:
      100%;

    object-position:
      68% center;

    opacity:
      0.56;

    -webkit-mask-image:
      none;

    mask-image:
      none;

  }


  .ak-hero-overlay {

    background:

      linear-gradient(
        180deg,
        rgba(8, 8, 8, 0.70) 0%,
        rgba(8, 8, 8, 0.88) 36%,
        #080808 75%,
        #080808 100%
      );

  }


  .ak-hero-inner {

    min-height:
      760px;

    padding-top:
      45px;

    padding-bottom:
      24px;

  }


  .ak-hero-services {

    gap:
      20px;

    margin-bottom:
      45px;

    font-size:
      0.67rem;

  }


  .ak-hero-content {

    width:
      100%;

  }


  .ak-hero-content h1 {

    font-size:
      clamp(
        3rem,
        14vw,
        4.8rem
      );

  }


  .ak-hero-text {

    max-width:
      560px;

  }


  .ak-hero-facts {

    grid-template-columns:
      1fr;

    padding-top:
      0;

  }


  .ak-hero-fact,
  .ak-hero-fact:first-child {

    min-height:
      0;

    padding:
      17px 4px;

  }


  .ak-hero-fact:not(:last-child)::after {

    top:
      auto;

    right:
      0;

    bottom:
      0;

    left:
      0;

    width:
      auto;

    height:
      1px;

  }


  /* --------------------------------------------------------
     WORLD
  -------------------------------------------------------- */

  .ak-world-list {

    gap:
      72px;

  }


  .ak-world-image {

    height:
      360px;

  }


  .ak-world-number {

    font-size:
      4rem;

  }


  /* --------------------------------------------------------
     FORMENSPIEL
  -------------------------------------------------------- */

  .ak-shape-stage {

    min-height:
      470px;

    padding:
      45px 20px;

  }


  /* --------------------------------------------------------
     PASSEND ZUM EINSATZ
  -------------------------------------------------------- */

  .ak-surface-stage {

    height:
      530px;

  }


  .ak-surface-scene-overlay {

    background:

      linear-gradient(
        0deg,
        rgba(6, 8, 9, 0.98) 0%,
        rgba(6, 8, 9, 0.92) 37%,
        rgba(6, 8, 9, 0.54) 66%,
        rgba(6, 8, 9, 0.05) 92%
      );

  }


  .ak-surface-scene-copy {

    right:
      26px;

    bottom:
      28px;

    left:
      26px;

    width:
      auto;

  }


  .ak-surface-rail {

    grid-template-columns:
      1fr;

  }


  .ak-surface-choice:nth-child(odd) {

    border-right:
      0;

  }


  .ak-surface-choice {

    min-height:
      96px;

  }


  /* --------------------------------------------------------
     MATERIALIEN
  -------------------------------------------------------- */

  .ak-material-grid {

    grid-template-columns:
      1fr;

  }


  .ak-material-card:last-child {

    grid-column:
      auto;

  }


  .ak-material-image,
  .ak-material-card:last-child
  .ak-material-image {

    height:
      330px;

  }


  /* --------------------------------------------------------
     OUTPUT
  -------------------------------------------------------- */

  .ak-output-steps {

    grid-template-columns:
      1fr;

  }


  .ak-output-step {

    min-height:
      0;

    grid-template-columns:
      62px
      minmax(0, 1fr);

    padding:
      20px 5px;

    border-right:
      0;

  }


  .ak-output-step::before {

    top:
      0;

    right:
      auto;

    bottom:
      0;

    left:
      0;

    width:
      2px;

    height:
      auto;

    transform:
      scaleY(0);

  }


  .ak-output-step.is-active::before {

    transform:
      scaleY(1);

  }


  .ak-output-stage {

    min-height:
      520px;

    padding:
      55px 20px 85px;

  }


  .ak-sticker-sheet {

    width:
      min(
        450px,
        94%
      );

    padding:
      42px 35px;

    gap:
      30px;

  }


  .ak-output-status {

    grid-template-columns:
      auto
      minmax(0, 1fr);

  }


  .ak-output-status
  > span:last-child {

    grid-column:
      2;

  }


  /* --------------------------------------------------------
     FAQ
  -------------------------------------------------------- */

  .ak-faq-heading {

    margin-bottom:
      38px;

  }


  .ak-faq-item summary {

    padding:
      22px 0;

    font-size:
      1.04rem;

  }


  .ak-faq-item > p {

    padding:
      0 0 24px;

  }


  /* --------------------------------------------------------
     ANFRAGE
  -------------------------------------------------------- */

  .ak-final-section {

    padding-top:
      60px;

    padding-bottom:
      80px;

  }


  .ak-final-card {

    padding:
      38px 28px;

  }

}



/* ==========================================================
   BIS 620 PX
========================================================== */

@media (max-width: 620px) {


  /* --------------------------------------------------------
     ALLGEMEIN
  -------------------------------------------------------- */

  .ak-section-intro {

    margin-bottom:
      45px;

  }


  /* --------------------------------------------------------
     HERO
  -------------------------------------------------------- */

  .ak-hero-services {

    gap:
      14px 18px;

  }


  /* --------------------------------------------------------
     WORLD
  -------------------------------------------------------- */

  .ak-world-image {

    height:
      310px;

    border-radius:
      20px;

  }


  /* --------------------------------------------------------
     SHAPE BUTTONS
  -------------------------------------------------------- */

  .ak-shape-buttons {

    display:
      grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

  }


  .ak-shape-buttons button {

    width:
      100%;

  }


  .ak-sticker-preview {

    width:
      220px;

    height:
      220px;

    padding:
      34px;

  }


  .ak-sticker-preview--oval {

    width:
      280px;

    height:
      178px;

  }


  .ak-sticker-preview--free {

    width:
      220px;

    height:
      270px;

  }


  .ak-sticker-preview--free::before {

    width:
      160px;

    height:
      240px;

  }


  .ak-sticker-preview--free img {

    width:
      50px;

    height:
      40px;

  }


  /* --------------------------------------------------------
     SURFACE
  -------------------------------------------------------- */

  .ak-surface-stage {

    height:
      500px;

    border-radius:
      22px;

  }


  .ak-surface-scene-copy h3 {

    font-size:
      clamp(
        1.65rem,
        8vw,
        2.35rem
      );

  }


  .ak-surface-choice {

    grid-template-columns:
      45px
      minmax(0, 1fr)
      22px;

    gap:
      11px;

  }


  .ak-surface-choice-number {

    font-size:
      1.8rem;

  }


  /* --------------------------------------------------------
     MATERIAL
  -------------------------------------------------------- */

  .ak-material-image,
  .ak-material-card:last-child
  .ak-material-image {

    height:
      290px;

  }


  .ak-material-content {

    padding:
      26px 23px 28px;

  }


  /* --------------------------------------------------------
     OUTPUT
  -------------------------------------------------------- */

  .ak-output-stage {

    min-height:
      480px;

    padding:
      56px 10px 90px;

    border-radius:
      22px;

  }


  .ak-sticker-sheet {

    width:
      min(
        360px,
        92%
      );

    padding:
      34px 25px;

    gap:
      26px 20px;

  }


  .ak-sheet-sticker,
  .ak-sheet-sticker--round,
  .ak-sheet-sticker--square {

    width:
      92px;

    height:
      92px;

    padding:
      19px;

  }


  .ak-sheet-sticker--oval {

    width:
      115px;

    height:
      77px;

  }


  .ak-sheet-sticker--free {

    width:
      80px;

    height:
      110px;

    padding:
      0;

  }


  .ak-sheet-sticker--free img {

    width:
      38px;

    height:
      30px;

  }


  .ak-output-status {

    right:
      16px;

    left:
      16px;

  }


  /* --------------------------------------------------------
     ANFRAGE BUTTON
  -------------------------------------------------------- */

  .ak-final-button {

    width:
      100%;

  }

}



/* ==========================================================
   REDUZIERTE BEWEGUNG
========================================================== */

@media (prefers-reduced-motion: reduce) {


  .ak-changing-word,
  .ak-hero-service,
  .ak-world-image img,
  .ak-sticker-preview,
  .ak-sticker-shine,
  .ak-surface-scene,
  .ak-surface-choice,
  .ak-material-card,
  .ak-material-image img,
  .ak-output-step,
  .ak-sheet-sticker,
  .ak-sheet-light::after {

    animation:
      none !important;

    transition:
      none !important;

  }

}